<template>
   <view class="sign-in-container" v-show="showTask && currentTask">
    <view class="sign-in-bar">
      <text class="sign-in-text">AI助手可以帮助您到达地点后自动签到，是否开启</text>
      <switch class="sign-in-switch" :checked="autoSignInEnabled" color="#007AFF" @change="handleAutoSignInChange" />
    </view>
    <view class="sign-in-task">
      <view class="task-header">
        <view class="task-status">{{ currentTask.task_status_text }}</view>
        <text class="task-name">{{ currentTask.task_name }}</text>
        <text class="task-time">{{ remainingTime }}</text>
      </view>
      <text class="task-location">地点：{{ currentTask.task_location }}</text>
      <button class="sign-in-btn" @click="handleSignIn" :disabled="isSigning">
        {{ isSigning ? '签到中...' : '立即签到' }}
      </button>
    </view>
  </view>
</template>

<script>
import { initWebSocket, sendMessage } from '@/utils/websocket';
import { request } from '@/utils/request';

export default {

  data() {
    return {
      autoSignInEnabled: true,
      showTask: false,
      locationTimer: null,
      jobId: null,
      lastDistance: Infinity,
      checkInterval: 5000,
      isSigning: false,
      currentTask: null, // 当前任务数据
      remainingTime: '00:00:00', // 剩余时间
      countdownTimer: null, // 倒计时定时器
      isLoading: false // 添加加载状态
    };
  },
  mounted() {

    this.listenWebSocketMessage();
    this.startLocationUpdates();
    this.fetchAutoSignInStatus(); // 获取自动签到状态
  },
  beforeUnmount() {
    if (this.countdownTimer) {
      clearInterval(this.countdownTimer);
    }
  },
  methods: {
    // 获取自动签到状态
    fetchAutoSignInStatus() {
      this.isLoading = true;
      request({
        url: 'Parttimejobs/getAutoSignInStatus',
        method: 'GET',
        data: {
          user_id: uni.getStorageSync('uid')
        }
      }).then(res => {
        if (res.code === 200) {
          // 设置自动签到状态，1为自动，0为手动
          this.autoSignInEnabled = res.data.qiandao === 1;
        } else {
          console.error('获取自动签到状态失败:', res.msg);
        }
      }).catch(err => {
        console.error('获取自动签到状态请求失败:', err);
      }).finally(() => {
        this.isLoading = false;
      });
    },

    // 处理自动签到状态变更
    handleAutoSignInChange() {
      this.isLoading = true;
      request({
        url: 'Parttimejobs/updateAutoSignInStatus',
        method: 'POST',
        data: {
          user_id: uni.getStorageSync('uid'),
          qiandao: this.autoSignInEnabled ? 1 : 0 // 1为自动，0为手动
        }
      }).then(res => {
        if (res.code !== 200) {
          // 如果更新失败，恢复原来的状态
          this.autoSignInEnabled = !this.autoSignInEnabled;
          uni.showToast({ title: res.msg || '更新自动签到状态失败', icon: 'none' });
        }
      }).catch(err => {
        console.error('更新自动签到状态请求失败:', err);
        // 如果请求失败，恢复原来的状态
        this.autoSignInEnabled = !this.autoSignInEnabled;
        uni.showToast({ title: '网络错误，更新失败', icon: 'none' });
      }).finally(() => {
        this.isLoading = false;
      });
    },
    // 添加具名事件处理函数
    handleWebSocketMessage(message) {
    
      try {
        let parsedMessage;
        if (typeof message === 'string') {
          // 检查是否是有效的JSON格式
          if (message && (message.startsWith('{') || message.startsWith('['))) {
            parsedMessage = JSON.parse(message);
          } else {
            console.warn('[SignIn] 接收到非JSON格式的消息:', message);
            return; // 不是JSON格式，提前返回
          }
        } else {
          parsedMessage = message;
        }
        
        // 显示所有消息类型，不仅是location_check
        if (parsedMessage.type === 'location_check') {
          
          this.showTask = parsedMessage.data.in_range;
          if (parsedMessage.data.in_range) {
            this.currentTask = parsedMessage.data;
            this.parseLocationText();
            this.startCountdown();
          }
          this.adjustCheckInterval(parsedMessage.data.distance);
        } else {
          console.log('[SignIn] 未处理的消息类型:', parsedMessage.type);
        }
      } catch (error) {
        console.error('[SignIn] 消息处理失败:', error, '原始消息:', message);
      }
    },
    
    listenWebSocketMessage() {
      // 只移除当前组件的监听器，而不是所有
      uni.$off('websocket-message', this.handleWebSocketMessage.bind(this));
      // 注册具名函数作为监听器
      uni.$on('websocket-message', this.handleWebSocketMessage.bind(this));
    },
    // 解析位置文本
    parseLocationText() {
      if (this.currentTask && this.currentTask.task_location) {
        // 这里可以根据实际需求解析经纬度为具体地址
        // 简化处理：直接使用后端返回的地址或模拟地址

      }
    },
    // 启动倒计时
    startCountdown() {
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer);
      }

      const updateCountdown = () => {
        if (!this.currentTask || !this.currentTask.task_end_time) {
          this.remainingTime = '00:00:00';
          return;
        }

        // 修复iOS日期格式兼容性问题
        const endTimeStr = this.currentTask.task_end_time.replace(' ', 'T'); // 将空格替换为'T'
        const endTime = new Date(endTimeStr).getTime();
        const now = new Date().getTime();
        const diff = endTime - now;

        if (diff <= 0) {
          this.remainingTime = '00:00:00';
          clearInterval(this.countdownTimer);
          return;
        }

        // 计算时分秒
        const hours = Math.floor(diff / (1000 * 60 * 60));
        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((diff % (1000 * 60)) / 1000);

        this.remainingTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
      };

      // 立即更新一次
      updateCountdown();
      // 每秒更新一次
      this.countdownTimer = setInterval(updateCountdown, 1000);
    },
    sendLocation() {

      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          
          uni.setStorageSync('lat', res.latitude);
          uni.setStorageSync('lng', res.longitude);
          sendMessage(JSON.stringify({
            type: 'location_check',
            user_id: uni.getStorageSync('uid'),
            lat: res.latitude,
            lng: res.longitude
          }));
         
        },
        fail: (err) => {
          console.error('获取位置失败:', err);
        }
      });
    },
    // 添加缺失的startLocationUpdates方法
    startLocationUpdates() {
      // 立即执行一次位置检查
      this.sendLocation();

      // 设置定时器定期检查位置
      this.locationTimer = setInterval(() => {
        this.sendLocation();
      }, this.checkInterval);
    },

    // 添加缺失的stopLocationUpdates方法
    stopLocationUpdates() {
      if (this.locationTimer) {
        clearInterval(this.locationTimer);
        this.locationTimer = null;
      }
    },

    // 确保adjustCheckInterval方法正确实现
    adjustCheckInterval(distance) {
      // 根据距离动态调整检查频率
      if (distance > 500) {
        this.checkInterval = 30000; // 远距离：30秒一次
      } else if (distance > 100) {
        this.checkInterval = 10000; // 中距离：10秒一次
      } else {
        this.checkInterval = 5000; // 近距离：5秒一次
      }
    },
    // 新增签到方法
    handleSignIn() {
      if (!this.currentTask || !this.currentTask.job_id) {
        uni.showToast({ title: '任务信息不存在', icon: 'none' });
        return;
      }

      this.isSigning = true;
      request({
        url: 'Parttimejobs/task_sign_in',
        method: 'POST',
        data: {
          job_id: this.currentTask.job_id
        }
      }).then(res => {
        if (res.code === 200) {
          uni.showToast({ title: '签到成功', icon: 'success' });
          this.showTask = false;
          // 可以在这里添加签到成功后的其他逻辑
        } else {
          uni.showToast({ title: res.msg || '签到失败', icon: 'none' });
        }
      }).catch(err => {
        console.error('签到请求失败:', err);
        uni.showToast({ title: '网络错误，签到失败', icon: 'none' });
      }).finally(() => {
        this.isSigning = false;
      });
    }
  },

};
</script>
<style lang="scss">
.sign-in-container {
  background-color: white;
  padding: 0;
  // 修改圆角设置，明确指定顶部两个角为圆角
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  color: #333;
  position: fixed;
  bottom: 170rpx; /* 提升高度，避免被tab栏遮挡 */
  left: 0;
  right: 0;
  z-index: 1000; /* 提升层级，确保在tab栏之上 */
  margin-left: 20rpx;
  margin-right: 20rpx;
  margin-bottom: 30rpx;
  // 添加溢出隐藏，确保子元素圆角正确显示
  overflow: hidden;
}

.sign-in-bar {
  background: linear-gradient(90deg, #007AFF 0%, #5AC8FA 100%);
  padding: 24rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  font-size: 28rpx;
  /* 顶部两个角圆角 */
  border-radius: 20rpx 20rpx 0 0;
}

.sign-in-task {
  background-color: white;
  padding: 20rpx 30rpx;
  /* 底部任务区域不需要圆角，容器已设置整体圆角 */
}

.task-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.task-status {
  background-color: #4CD964;
  color: white;
  font-size: 24rpx;
  padding: 2rpx 12rpx;
  border-radius: 12rpx;
  margin-right: 16rpx;
}

.task-name {
  font-size: 32rpx;
  font-weight: bold;
  flex: 1;
}

.task-time {
  font-size: 28rpx;
  color: #FF3B30;
}

.task-location {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 20rpx;
  display: block;
}

.sign-in-btn {
  background-color: #007AFF;
  color: white;
  /* 签到按钮圆角 */
  border-radius: 12rpx;
  height: 68rpx;
  line-height: 58rpx;
  font-size: 25rpx;
  font-weight: bold;
  width: 172rpx;
  height: 56rpx;
  position: absolute;
  top: 190rpx;
  right: 30rpx;
}
</style>
